<template>
  <div class="electron-signature-company">
    <el-image alt="" :src="gerenIcon" class="qiye-icon" />
    <div class="account_box">
      <div class="account_title">
        <span class="account_title_name">个人电子签章认证</span>
        <span
          class="account_title_icon"
          :class="{'adopt': personIfCertification, 'refuse': !personIfCertification }"
        >
          <icon-font
            :icon="personIfCertification ? `iconpc-alert_ywcrz1x`: `iconpc-alert_wrzsq1x`"
          ></icon-font>
          {{personIfCertification ? '已认证': '未认证'}}
        </span>
      </div>
      <div class="account_prompt">开通企业电子签章，可用于业务盖章使用</div>
      <div>
        <el-button type="text" :loading="certification_loading" @click="goCertification" v-if="!personIfCertification">
          <icon-font icon="iconpc-other_cxrzicon1x"></icon-font>
          {{ '去认证' }}
        </el-button>
        <el-button type="text" :loading="recertification_loading" @click="handlePersonalShow" v-else>
          <icon-font icon="iconpc-other_cxrzicon1x"></icon-font>
          {{ '重新认证' }}
        </el-button>
        <!-- <el-button type="text" @click="handlePersonalShow" v-if="fddStatus === 4">
          <icon-font icon="iconpc-other_ylicon1x"></icon-font>
          {{ '电子签章预览' }}
        </el-button> -->
      </div>
    </div>
    <el-dialog title="提示" :visible.sync="showPersonalDialog" width="30%">
      <h1 class="text">重新认证确认</h1>

      <span>{{ '个人认证已认证，是否确认进行重新认证？' }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handlePersonalClose">取 消</el-button>
        <el-button type="primary" :loading="recertification_loading" @click="personalRecertification"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Gerenrenzheng from '@assets/personl/gerenrenzheng.png';
import Weirenzheng from '@assets/personl/weirenzheng.png';
import Yirenzheng from '@assets/personl/yirenzheng.png';
import Shuru from '@assets/personl/shuru.png';
import Geren from '@assets/personl/pc-qyzx-dzqzsz-gr-icon.png';

import {
  fddWebQueryPersonalCertification,
  fddWebApplyPersonalCertification
} from '@const/api_interfaceCenter';
import { hasIn } from 'lodash';
import { personalRepeatCertification } from '@const/api_interface';
export default {
  name: 'ElectronSignatureCompany',
  data() {
    return {
      gerenrenzheng: Gerenrenzheng,
      weirenzheng: Weirenzheng,
      yirenzheng: Yirenzheng,
      shuru: Shuru,
      gerenIcon: Geren,
      personIfCertification: null,
      showPersonalDialog: false,
      certification_loading: false,
      recertification_loading: false
    };
  },
  created() {
    this.queryPersonalCertification();
  },
  methods: {
    //个人电子签章重新认证
    personalRecertification() {
      this.recertification_loading = true;
      this.$axios
        .$get(personalRepeatCertification)
        .then(res => {
          this.recertification_loading = false;
          if (res.code === '0') {
            let obj = hasIn(res, 'payload') ? res.payload : {};
            if (obj.fddUrl) {
              window.open(obj.fddUrl, '_blank');
            }
          } else {
            this.$message.error(res.msg);
          }
        })
        .finally(() => {
          this.recertification_loading = false;
          this.showPersonalDialog = false;
        });
    },
    handlePersonalClose() {
      this.showPersonalDialog = false;
    },
    // 重新认证
    handlePersonalShow() {
      this.showPersonalDialog = true;
    },
    // 去认证
    goCertification() {
      this.certification_loading = true;
      this.$axios
        .get(fddWebApplyPersonalCertification)
        .then(res => {
          this.certification_loading = false;
          const { data } = res;
          if (!Number(data.code)) {
            const payload = data.payload;
            const applyPersonUrl = payload.fddUrl;
            window.open(applyPersonUrl, '_blank');
          } else {
            this.$message.error(data.msg);
          }
        })
        .finally(() => {
          this.certification_loading = false;
        });
    },
    // 查询是否个人认证
    async queryPersonalCertification() {
      const personInfo = await this.$axios.get(
        fddWebQueryPersonalCertification
      );
      this.personIfCertification = hasIn(personInfo, [
        'data',
        'payload',
        'ifCertification'
      ])
        ? personInfo.data.payload.ifCertification
        : false;
      console.log(personInfo.data.payload.ifCertification);
      console.log(this.personIfCertification);
    }
  }
};
</script>
<style lang="less">
.electron-signature-company {
  padding: 50px 0px 0px 40px;
  display: flex;
  .qiye-icon {
    width: 26px;
    height: 26px;
    margin: 20px;
  }
  .account_box {
    div {
      height: 30px;
      line-height: 30px;
    }
    .account_title {
      font-size: 16px;
      color: #333;
      .account_title_name {
        color: #333;
        margin-right: 17px;
      }
      .adopt {
        color: #9cd17c;
      }
      .refuse {
        color: #ffa84f;
      }
      .iconpc-alert_ywcrz1x {
        color: #9cd17c;
      }
      .iconpc-alert_wrzsq1x {
        color: #ffa84f;
      }
      i {
        font-size: 16px;
        margin-right: 7px;
      }
    }
    .account_prompt {
      width: 500px !important;
      color: #999;
      font-size: 14px;
    }
    .el-button {
      color: #4d84ff;
      cursor: pointer;
      i {
        font-size: 14px;
        margin-right: 3px;
      }
    }
    .unauthenticated {
      color: #ffa84f;
      font-size: 14px;
      margin-left: 0 !important;
    }
    .isOk {
      color: #9cd17c;
      font-size: 14px;
      margin-left: 0 !important;
    }

    .gotosure span {
      margin-left: -5px;
    }
    .cuury_phone {
      color: #db5063;
      margin-left: 10px;
    }
    .we_chat {
      margin-right: 15px;
      color: #000;
    }
  }
  .weirenzheng,
  .shuru {
    width: 18px;
    height: 18px;
  }
  .shuru,
  .yirenzheng,
  .weirenzheng {
    width: 14px;
    height: 14px !important;
    margin-left: 12px;
    margin-right: 4px;
    margin-bottom: -2px;
  }
}
</style>
